<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/jquery.js"></script>
</head>
<body>
<div id="register">
    <el-card class="box-card" style="width: 450px; margin: 180px auto; border-radius: 15px">
        <el-tabs v-model="activeName">
            <el-tab-pane label="企业注册" name="first">
                <el-form :model="company" :rules="rules" :inline="false" ref="company" label-width="100px" class="ruleForm" size="normal">
                    <el-form-item label="企业名称" prop="companyName">
                        <el-input type="text" v-model="company.companyName" placeholder="请输入企业名称"></el-input>
                    </el-form-item>
                    <el-form-item label="企业法人" prop="legal">
                        <el-input type="text" v-model="company.legal" placeholder="请输入企业法人"></el-input>
                    </el-form-item>
                    <el-form-item label="企业类型" prop="companyType">
                        <el-input type="text" v-model="company.companyType" placeholder="请输入企业类型"></el-input>
                    </el-form-item>
                    <el-form-item label="选择地区：">
                        <template>
                            <el-select v-model="company.companyProvince"  style="width: 80px;"placeholder="请选择" @change="selectCity">
                                <el-option
                                        v-for="(pro,index) in provinces"
                                        :key="index"
                                        :label="pro"
                                        :value="pro">
                                </el-option>
                            </el-select>

                            <el-select v-model="company.companyCity" style="margin-left: 20px;width: 80px;" placeholder="请选择市" @change="selectRegion">
                                <el-option
                                        v-for="(city,index) in typeCitys"
                                        :key="index"
                                        :label="city"
                                        :value="city">
                                </el-option>
                            </el-select>

                            <el-select v-model="company.companyArea" style="margin-left: 20px;width: 80px;" placeholder="请选择市">
                                <el-option
                                        v-for="(region,index) in typeRegions"
                                        :key="index"
                                        :label="region"
                                        :value="region">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>

                    <el-form-item label="公司地址" prop="companyAddress">
                        <el-input type="text" v-model="company.companyAddress" placeholder="请输入公司地址"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="fixedTel">
                        <el-input type="text" v-model="company.fixedTel" placeholder="请输入联系方式"></el-input>
                    </el-form-item>
                    <el-form-item label="企业邮箱" prop="companyEmail">
                        <el-input type="text" v-model="company.companyEmail" placeholder="请输入企业邮箱"></el-input>
                    </el-form-item>
                    <template>
                        <el-checkbox v-model="checked1" style="margin-left: 30px ">同意</el-checkbox>
                        <a href="#">《用户注册协议》</a>
                    </template>
                    <el-form-item>
                        <el-button type="primary" @click="submitCompanyForm()" style="margin-top: 30px ">🗝企业注册</el-button>
                    </el-form-item>

                </el-form>
            </el-tab-pane>
            <el-tab-pane label="个人注册" name="second">
                <el-form :model="user" :rules="rules" :inline="false" ref="user" label-width="100px" class="ruleForm" size="normal">
                <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" >
                    <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="user.checkPass" autocomplete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realname">
                    <el-input type="text" v-model="user.realname" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" >
                    <el-input type="text" v-model="user.telephone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" >
                    <el-input type="text" v-model="user.userEmail" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <template>
                    <el-checkbox v-model="checked2" style="margin-left: 30px ">同意</el-checkbox>
                    <a href="#">《用户注册协议》</a>
                </template>
                <el-form-item>
                    <el-button type="primary" @click="submitUserForm()">个人注册</el-button>
                </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</div>
<script>
    new Vue({
        el:'#register',
        data(){
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                activeName: 'second',
                checked1: true,
                checked2: true,
                user:{
                    username:"",
                    password:"",
                    userEmail:"",
                    telephone:"",
                    realname:""
                },
                company:{
                    id:0,
                    companyName:"",
                    legal:"",
                    companyType:"",
                    companyAddress:"",
                    fixedTel:"",
                    companyEmail:"",
                    companyProvince:"",
                    companyCity:"",
                    companyArea:"",
                    companyStatus:"已认证"
                },
                provinces:["湖北省","湖南省","广东省","河南省","河北省","陕西省","广西省"],//省
                citys:{
                    "湖北省":["武汉市","襄阳市","宜昌市","荆州市","恩施市"],
                    "湖南省":["长沙市","株洲市","湘潭市","衡阳市","邵阳市"],
                    "广东省":["广东市","深圳市","珠海市","中山市","佛山市"],
                    "河南省":["郑州市","开封市","洛阳市","南阳市","许昌市"],
                    "陕西省":["西安市","铜川市","宝鸡市","咸阳市","汉中市"],
                    "广西省":["南宁市","柳州市","桂林市","北海市","梧州市"]
                },//市
                regions:{
                    "武汉市":["洪山区","东湖区","青山区","江夏区","江汉区"],
                    "荆州市":["荆州区","沙市区"],
                    "长沙市":["长沙县","善华县","湘潭县","湘阴县"],
                    "襄阳市":["襄城区","樊城区","襄州区","保康县"],
                    "株洲市":["茶陵县","炎陵县","芦淞县"],
                    "广东市":["黄埔区","花都区","天河区"],
                    "郑州市":["中原区","二七区","上街区"],
                    "西安市":["莲湖区","雁塔区","未央区"],
                    "南宁市":["江南区","青秀区","兴宁区"]
                },//区
                typeCitys:[],//选择的省下的市
                typeRegions:[],//选择的市下的县
                state:"未注册",
                rules:{
                    username: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入用户名',
                        }
                    ],
                    checkPass: [
                        {
                            required:true,
                            trigger:'changer',
                            validator: validatePass
                        }
                    ],

                    password: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入密码'
                        }
                    ],
                    userEmail: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入电子邮箱'
                        }
                    ],
                    telephone: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入手机号'
                        }
                    ],
                    realname: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入真实姓名',
                        }
                    ],
                    companyName: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入企业名称',
                        }
                    ],
                    legal: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入企业法人',
                        }
                    ],
                    companyType: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入企业类型',
                        }
                    ],
                    companyAddress: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入企业地址',
                        }
                    ],
                    fixedTel: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入固定电话',
                        }
                    ],
                    companyEmail: [
                        {
                            required:true,
                            trigger:'changer',
                            message:'请输入企业邮箱',
                        }
                    ],
                }
            }

        },
        methods:{
            submitUserForm() {

                this.$refs.user.validate(valid=>{
                    if(valid){
                        axios.post("/user",this.user)
                            .then(res =>{
                                if(res.data=="ok"){
                                    location.href="/page/login.html";
                                }
                            })
                    }
                })
            },
            submitCompanyForm() {
                this.$refs.company.validate(valid=>{
                    if(valid){
                        axios.post("/company",this.company)
                            .then(res =>{
                                console.log(this.company);
                                if(res.data=="ok"){
                                    console.log(11);
                                    location.href="/page/login.html";
                                }
                            })
                    }
                })
            },
            //二级菜单
            selectCity(){
                this.company.companyCity='';
                for( const k in this.provinces){
                    if(this.company.companyProvince===this.provinces[k]){
                        this.typeCitys=this.citys[this.company.companyProvince]
                    }
                }
            },
            //三级菜单
            selectRegion(){
                this.company.companyArea='';
                for(const k in this.typeCitys){
                    if(this.company.companyCity===this.typeCitys[k]){
                        this.typeRegions=this.regions[this.company.companyCity];
                    }
                }
            },
        },
        mounted(){
            this.selectCity();
            this.selectRegion();
        }
    })
</script>
</body>
</html>